<template>
  <view :class="cstyle" class="cLabelT ">
    <view v-if="mode != 'img' && mode != 'textarea'&& mode != 'video'&& mode != 'videos'"
      :class="['c-'+size,disabled ? 'disabled':'']" class="cLabel" :style="flex ? 'display: flex;' : ''">
      
      <view class="cLabel-l text-cut" v-if="title" :class="flex ? 'flex-l': 'noflex'">{{title}}</view>
      <view class="cLabel-mw">
        <view class="cLabel-m text-cut " :style="{'text-align':align}">
          <!-- mode='' -->
          <view v-if="mode == ''">{{dataText}}</view>
          <!-- mode='text' || 'nrmber' || 'idcard' -->
          <view v-if="mode == 'text'">
            <input :class="disabled ? 'disabledInp': ''" confirm-type="next" placeholder-class="input-placeholder"
              type="text" @input='handInput' :disabled='disabled' @blur="handBlur" v-model="inputValue"
              :placeholder="placeholder? placeholder : $t('yuan.sr')" />
          </view>
          <view v-if="mode == 'number'">
            <input :class="disabled ? 'disabledInp': ''" confirm-type="next" placeholder-class="input-placeholder"
              type="number" @input='handInput' :disabled='disabled' @blur="handBlur" v-model="inputValue"
              :placeholder="placeholder? placeholder : $t('yuan.sr') " />
          </view>
          <view v-if="mode == 'idcard'">
            <input :class="disabled ? 'disabledInp': ''" confirm-type="next" placeholder-class="input-placeholder"
              type="idcard" @input='handInput' :disabled='disabled' @blur="handBlur" v-model="inputValue"
              :placeholder="placeholder? placeholder : $t('yuan.sr')" />
          </view>
          <view v-if="mode == 'password'">
            <input :class="disabled ? 'disabledInp': ''" confirm-type="next" placeholder-class="input-placeholder"
              type="text" password @input='handInput' :disabled='disabled' @blur="handBlur" v-model="inputValue"
              :placeholder="placeholder? placeholder : '点击输入'+title " />
          </view>
          <!-- mode='switch' -->
          <view v-if="mode == 'switch'">
            <switch @change="switchChange" :class="dataText?'checked':''" :disabled='disabled'
              :checked="dataText?true:false"></switch>
          </view>

       

          

          <!-- moed='selector' -->
          <!-- style="{color:fieldindex>-1?'#555':'#a0a0a0'}" -->
          <view v-if="mode == 'selector'">
            <view v-if="mode == 'selector'" @tap="toggle('selector')" class="text_align"
              :style="{color:nData=='请选择'?'#a0a0a0':'#555'}">{{ nData }}</view>
            <cPicker v-if="mode == 'selector'" :name="name" mode="selector" :defaultVal="defaultVal" @confirm="hand"
              :disabledAfter="true" ref="selector" :themeColor="themeColor" :selectList="selectList">
            </cPicker>
          </view>
          <view v-if="mode == 'selectors'">
            <view v-if="mode == 'selectors'" @tap="toggle('selectors')" class="text_align"
              :style="{color:nData=='请选择'?'#a0a0a0':'#555'}">{{ nData }}</view>
            <cPicker v-if="mode == 'selectors'" mode="selectors" :defaultVal="defaultVal" @confirm="hand"
              :disabledAfter="true" ref="selectors" :themeColor="themeColor" :selectList="selectList">
            </cPicker>
          </view>

          <!-- moed='half' -->
          <view v-if="mode == 'half'">
            <view v-if="mode == 'half'" @tap="toggle('half')" class="text_align"
              :style="{color:nData=='请选择'?'#a0a0a0':'#555'}">{{ nData}}</view>
            <cPicker v-if="mode == 'half'" mode="half" :startYear="startYear" :endYear="endYear"
              :defaultVal="defaultVal" :current="current" @confirm="hand" :disabledAfter="true" ref="half"
              :themeColor="themeColor"></cPicker>
          </view>
          <!-- moed='date' -->
          <view v-if="mode == 'date'">
            <view v-if="mode == 'date'" @tap="toggle('date')" class="text_align"
              :style="{color:nData=='请选择'?'#a0a0a0':'#555'}">{{ nData }}</view>
            <cPicker v-if="mode == 'date'" mode="date" :startYear="startYear" :endYear="endYear"
              :defaultVal="defaultVal" :current="current" @confirm="hand" :disabledAfter="true" ref="date"
              :themeColor="themeColor"></cPicker>
          </view>
          <!-- moed='yearMonth' -->
          <view v-if="mode == 'yearMonth'">
            <view v-if="mode == 'yearMonth'" @tap="toggle('yearMonth')" class="text_align"
              :style="{color:nData=='请选择'?'#a0a0a0':'#555'}">{{nData}}</view>
            <cPicker v-if="mode == 'yearMonth'" mode="yearMonth" :startYear="startYear" :endYear="endYear"
              :defaultVal="defaultVal" :current="current" @confirm="hand" :disabledAfter="true" ref="yearMonth"
              :themeColor="themeColor"></cPicker>
          </view>
          <!-- moed='dateTime' -->
          <view v-if="mode == 'dateTime'">
            <!-- nData -->
            <view v-if="mode == 'dateTime'" @tap="toggle('dateTime')" class="text_align"
              :style="{color:nData=='请选择'?'#a0a0a0':'#555'}">{{nData}}</view>
            <cPicker v-if="mode == 'dateTime'" mode="dateTime" :startYear="startYear" :endYear="endYear"
              :defaultVal="defaultVal" :current="current" @confirm="hand" :disabledAfter="true" ref="dateTime"
              :themeColor="themeColor"></cPicker>
          </view>
          <!-- moed='dateTime' -->
          <view v-if="mode == 'range'">
            <view v-if="mode == 'range'" @tap="toggle('range')" class="text_align"
              :style="{color:nData=='请选择'?'#a0a0a0':'#555'}">{{nData}}</view>
            <cPicker v-if="mode == 'range'" mode="range" :startYear="startYear" :endYear="endYear"
              :defaultVal="defaultVal" :current="current" @confirm="hand" :disabledAfter="true" ref="range"
              :themeColor="themeColor"></cPicker>
          </view>
          <!-- moed='time' -->
          <view v-if="mode == 'time'">
            <view v-if="mode == 'time'" @tap="toggle('time')" class="text_align"
              :style="{color:nData=='请选择'?'#a0a0a0':'#555'}">{{nData}}</view>
            <cPicker v-if="mode == 'time'" mode="time" :startYear="startYear" :endYear="endYear"
              :defaultVal="defaultVal" :current="current" @confirm="hand" :disabledAfter="true" ref="time"
              :themeColor="themeColor"></cPicker>
          </view>
          <!-- moed='region' -->
          <view v-if="mode == 'region'">
            <view v-if="mode == 'region'" @tap="toggle('region')" class="text_align"
              :style="{color:nData=='请选择'?'#a0a0a0':'#555'}">{{nData}}</view>
            <cPicker v-if="mode == 'region'" mode="region" :startYear="startYear" :endYear="endYear"
              :defaultVal="defaultVal" :current="current" @confirm="hand" :disabledAfter="true" ref="region"
              :themeColor="themeColor"></cPicker>
          </view>

          <view v-if="mode == 'limit'">
            <view v-if="mode == 'limit'" @tap="toggle('limit')" class="text_align"
              :style="{color:nData=='请选择'?'#a0a0a0':'#555'}">{{nData}}</view>
            <cPicker v-if="mode == 'limit'" mode="limit" :startYear="startYear" :endYear="endYear"
              :defaultVal="defaultVal" :current="current" @confirm="hand" :disabledAfter="true" ref="limit"
              :themeColor="themeColor"></cPicker>
          </view>
          <!-- moed='limitHour' -->
          <view v-if="mode == 'limitHour'">
            <view v-if="mode == 'limitHour'" @tap="toggle('limitHour')" class="text_align" style="text-align: right;"
              :style="{color:nData=='请选择'?'#a0a0a0':'#555'}">{{nData}}</view>
            <cPicker v-if="mode == 'limitHour'" mode="limitHour" :startYear="startYear" :endYear="endYear"
              :defaultVal="defaultVal" :current="current" @confirm="hand" :disabledAfter="true" ref="limitHour"
              :themeColor="themeColor"></cPicker>
          </view>


        </view>
        <view v-if="rightText || rightIcon" @tap="handRight">
          <view :class="rightIcon">{{rightText}}</view>
        </view>
        <!-- <view   v-if="rightIcon" >
					<view  ></view>
				</view> -->
      </view>
    </view>
    <view class="cLabel"  v-if="mode == 'textarea'"
      :class="['c-'+size,disabled ? 'disabled':'']">

      <view class="textarea-t">

        <view class="cLabel-l text-cut textarea-l" v-if="title" style="display: flex;">
        
          {{title}}
        </view>
        <view class="subTitle" v-if="subTitle">{{subTitle}}</view>
        <view class="cLabel-r" v-if="rightIcon">
          <view :class="rightIcon" @tap="handRight"></view>
        </view>
      </view>

      <view v-if="mode == 'textarea'" class='c-textarea'>

        <textarea :placeholder="placeholder? placeholder : $t('yuan.sr')" :disabled='disabled' id="forFocus"
          v-model="inputValue" @input="handInput" @blur="handBlur" :maxlength="maxlength"></textarea>
        <label v-if="showNumber" for="forFocus" class="c-textarea-count ">{{textateaL}}/{{maxlength}}</label>
      </view>
    </view>
    <view class="cLabel" v-if="mode == 'img'" :class="['c-'+size,disabled ? 'disabled':'']">
      <view v-if="title" class="cLabel-l img-l">

        <view class="text-lg" style="display: flex;">
          
          <view>{{title}}</view>
          <view class="subTitle" v-if="subTitle">{{subTitle}}</view>
        </view>
        <view class="action">
          {{inputValue.length}}/{{imgL}}
        </view>
      </view>
      <view class="grid col-4 grid-square flex-sub ">
        <view class="bg-img" v-for="(item,index) in inputValue" :key="index" @tap="ViewImage(index)">
          <image :src="inputValue[index]" mode="aspectFill"></image>
          <view v-if="imgType != 'show'" class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
            <text class='cuIcon-close'></text>
          </view>
        </view>
        <view class="solids" @tap="ChooseImage" v-if="inputValue.length<imgL && imgType != 'show'">
          <text class='cuIcon-cameraadd'></text>
        </view>
      </view>
      <cpImg ref="cpimg" @result="cpimgOk" @err="cpimgErr" :number="cpimgNumber" :fixOrientation="cpimgFixOrientation"
        :size="cpimgSize" :maxWidth="cpimgMaxWidth" :ql="cpimgQl" :type="cpimgType" />
    </view>

    <view class="cLabel" v-if="mode == 'videos'" :class="['c-'+size,disabled ? 'disabled':'']">
      <view v-if="title" class="cLabel-l vid-l">
        <view class="text-lg" style="display: flex;">
          <view>{{title}}</view>
          <view class="subTitle" v-if="subTitle">{{subTitle}}</view>
        </view>
        <view class="action">
          {{inputValue.length}}/{{vidL}}

        </view>
      </view>
      <view class="flex-sub grid-square col-8 grid">
        <view class="bg-vid" v-for="(item,index) in inputValue" :key="index">
          <video :src="inputValue[index]" mode="aspectFill"></video>
          <view v-if="vidType != 'show'" class="cu-tag bg-red" @tap.stop="DelVid" :data-index="index">
            <text class='cuIcon-close'></text>
          </view>
        </view>
        <view class="solids" @tap="ChooseVid" v-if="inputValue.length<vidL && vidType != 'show'">
          <text class='cuIcon-cameraadd'></text>
        </view>
      </view>
      <cpVid ref="cpvid" @result="cpvidOk" @err="cpvidErr" :number="cpvidNumber" :fixOrientation="cpvidFixOrientation"
        :size="cpvidSize" :maxWidth="cpvidMaxWidth" :ql="cpvidQl" :type="cpvidType" />
    </view>


    <!-- <view class="cLabel" v-if="mode == 'video'" :class="['c-'+size,disabled ? 'disabled':'']">
			<view v-if="title" class="cLabel-l img-l">
				<view class="text-lg">
					<view>{{title}}</view>
					<view class="subTitle" v-if="subTitle">{{subTitle}}</view>
				</view>
				<view class="action">
					{{fastImgLists.length}}/{{maxNum}}
				</view>
			</view>
			<view class="items" style="background-color: #fff;" v-for="(item, index) in fastImgLists" :key="index">
				<view class="bg-img" v-if="item.type == 'video'"
					style="position:relative;display: flex;justify-content: center;align-items: center;width: 80%;margin:auto;padding: 20upx 0;">
			
					<video v-show="fastImgLists[index].needload != 'true'" :src="item.filePath"></video>
					<view @tap.stop="delectVideo($event,item.id)" class="remove cu-tag bg-red" ::data-index="index"
						style="width: 38upx;height: 38upx;position: absolute;top: 20upx;right: 0;z-index:12;background-color: rgba(0,0,0,0.5);">
						<text class='cuIcon-close'></text>
					</view>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="grid col-4 grid-square flex-sub">
					<view class="solids delete" style="margin-top: 30upx;" v-if="canAdd"
						@tap="sourceTypeChangechooseVideo">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
		</view> -->


  </view>
</template>

<script>
  import cPicker from "@/components/c-picker/c-picker.vue"
  import cpImg from "@/components/c-upload/cpimg.vue"
  import cpVid from "@/components/c-upload/cpvid.vue"
  import multipleSelect from "@/components/multiple-select/multiple-select";
  // var sourceType = [
  // 	['camera'],
  // 	['album'],
  // 	['camera', 'album']
  // ]
  // var maxNum = 6;
  import {
    picker
  } from "../mixins/picker.js"

  function oneOf(value, validList) {

    for (let i = 0; i < validList.length; i++) {
      if (value === validList[i]) {

        return true;
      }
    }
    throw new Error('mode无效，请选择有效的mode!');
    return false;
  }
  export default {
    mixins: [picker],
    components: {
      cPicker,
      cpImg,
      cpVid,
      multipleSelect
    },
    props: {
      // 主体
      mode: {
        type: String,
        validator(mode) {
          let modeList = ['', 'text', 'number', 'idcard', 'switch', 'textarea', 'password', 'img', 'video',
            'selector',
            'half', 'date', 'dateTime', 'yearMonth', 'time', 'region', 'limit', 'limitHour',
            'range', 'videos', "selectors", "checkbox"
          ]
          return oneOf(mode, modeList);
        },
        default: "",
      },
      must: {
        type: String,
        default: 'must',
      },
      disabled: {
        type: Boolean,
        default: false,
      },
      // select 字段
      name: {
        type: String,
        default: 'labels',
      },
      top: {
        type: String,
        default: '0upx',
      },
      // 样式类
      cstyle: {
        type: String,
        default: "",
      },
      size: { // medium small mini
        type: String,
        default: "small",
      },
      flex: {
        type: Boolean,
        default: true,
      },
      align: { // left center right
        type: String,
        default: 'left',
      },
      // 文字类
      title: {
        type: String,
        default: "默认占位符",
      },
      dataText: {
        default: "默认占位符",
        type: [String, Number, Boolean, Array],
      },
      placeholder: {
        type: String,
      },
      maxlength: {
        type: [Number, String],
        default: 200
      },
      rightText: {
        type: String,
      },
      // 状态
      showNumber: {
        type: Boolean,
        default: true,
      },
      clear: {
        type: Boolean,
        default: false,
      },
      // 修饰类
      rightIcon: {
        type: String,
        default: 'cuIcon-right'
      },
      // mode = 'img'
      imgType: { //shou -展示  add - 正常添加  edit-修改
        type: String,
        default: 'add',
      },
      subTitle: {
        type: String,
        default: '',
      },
      imgL: {
        type: Number,
        default: 9,
      },
      imgs: {
        type: Array,
        default: () => []
      },
      vids: {
        type: Array,
        default: () => []
      },
      cpimgSize: { //照片大小超过此值就压缩，且最大宽高等于maxWidth
        type: Number,
        default: 500
      },
      cpimgMaxWidth: { //照片宽高超过此值就压缩，且最大宽高等于此值
        type: Number,
        default: 750
      },
      cpimgQl: { //照片压缩比 0-1	
        type: Number,
        default: 0.92
      },
      cpimgType: {
        type: String,
        default: 'url'
      }, //照片压缩后返回的格式  base64	
      cpimgFixOrientation: {
        type: Boolean,
        default: true
      }, //是否修正图片方向（暂时只支持H5）
      cpimgNumber: {
        type: Number,
        default: 1
      }, //一次压缩图片数量（不支持H5）

      vidL: {
        type: Number,
        default: 3,
      },
      cpvidMaxWidth: { //视频宽高超过此值就压缩，且最大宽高等于此值
        type: Number,
        default: 750
      },
      cpvidSize: { //视频大小超过此值就压缩，且最大宽高等于maxWidth
        type: Number,
        default: 500
      },
      cpvidNumber: {
        type: Number,
        default: 1
      },
      cpvidFixOrientation: {
        type: Boolean,
        default: true
      },
      cpvidType: {
        type: String,
        default: 'url'
      },
      vidType: {
        type: String,
        default: 'add',
      },
      cpvidQl: { //视频压缩比 0-1	
        type: Number,
        default: 0.92
      },
      themeColor: {
        type: String,
        default: 'red',
      }

    },
    data() {
      return {
        defaultSelected: [], //默认选中项
        inputValue: undefined,
        textateaL: 0,
        cimgs: this.imgs,
        show: false,
        // inputValue: this.imgs,

        nData: this.dataText ? this.dataText : this.placeholder ? this.placeholder : '请选择',

        modeList: ['half', 'date', 'dateTime', 'yearMonth', 'time', 'region', 'selector', 'limit', 'limitHour',
          'range', "selectors", "checkbox"
        ],
        cvids: this.vids,


        // fastImgLists: [],
        canAdd: true,
        // videosourceType: ['拍摄', '相册'],
        // videosourceTypeIndex: 2,
        // sourceType: ['拍摄', '相册'],
        // maxNum: 6,
        mustIcon: "../../static/Scope.png",
        unIcon: "../../static/unscope.png",

      };
    },
    watch: {
      // dataText(val) {
      // 	// if(this.mode == 'text' || this.mode == 'number' || this.mode == 'idcard' || this.mode == 'textarea'){
      // 	// 	this.inputValue = this.dataText
      // 	// }
      // 	this.inputValue = this.dataText
      // 	this.nData = this.dataText ? this.dataText : this.placeholder ? this.placeholder : '点击选择' + this.title
      // }
      dataText: {


        handler(val) {
          this.inputValue = this.dataText

          this.nData = this.dataText ? this.dataText : this.placeholder ? this.placeholder : '请选择'
          // this.nData = this.dataText ? this.dataText : this.placeholder ? this.placeholder : '点击选择' + this.title
        },
        // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
        immediate: true

      }
    },
    methods: {
      change(e) {
        // console.log(e)
        var data = e.detail.data
        this.$emit('getSelect', data)
        // var a = []
        // data.map((item, index) => {
        // 	a.push(item.fItemName)
        // })
        // this.totalData.fSpecimenage = a.join(",")

      },
      confirm(data) {

        this.totalData.fSpecimenage = data.map(el => el.fItemName).join(",");
        this.fSpecimenageindex = 0
      },
      toggle(val) {
        if (this.disabled) {
          return
        }
        this.$refs[val].show();
      },
      hand(value) {
        this.$emit('input', value.result)
        this.$emit('getData', value)
      },
      handRight() {
        this.$emit('handRight')
      },
      switchChange(value) {
        this.$emit('hand', value.detail.value)
      },
      ChooseVid() {
        this.$refs.cpvid._changVid()
      },
      cpvidOk(val) {
        if (val) {
          this.inputValue = this.inputValue.length != 0 ? this.inputValue.concat(val) : val;
          this.$emit('hands', this.inputValue)
        }
      },
      DelVid(e) {
        uni.showModal({
          title: '提示',
          content: '确定要删除该项吗？',
          cancelText: '再看看',
          confirmText: '确定',
          success: res => {
            if (res.confirm) {
              this.inputValue.splice(e.currentTarget.dataset.index, 1)
              this.$emit('hands', this.inputValue)
            }
          }
        })
      },
      // 
      handInput(value) {
        let val = value.detail.value;
        if (this.mode == 'textarea') {
          this.textateaL = val.length;
        }
        this.$emit('input', val)
      },
      handBlur(value) {
        let val = value.detail.value;
        this.$emit('blur', val)
      },

      // img
      // 图片选择
      ChooseImage() {

        this.$refs.cpimg._changImg()
      },
      // 
      cpimgOk(val) {
        if (val) {
          this.inputValue = this.inputValue.length != 0 ? this.inputValue.concat(val) : val;
          this.$emit('hand', this.inputValue)
        }
      },
      cpimgErr(val) {
        console.log(val)
      },
      cpvidErr(val) {
        console.log(val)
      },
      // 删除图片
      DelImg(e) {
        uni.showModal({
          title: '提示',
          content: '确定要删除该项吗？',
          cancelText: '再看看',
          confirmText: '确定',
          success: res => {
            if (res.confirm) {
              this.inputValue.splice(e.currentTarget.dataset.index, 1)
              this.$emit('hand', this.inputValue)
            }
          }
        })
      },
      // 预览图片
      ViewImage(e) {
        uni.previewImage({
          urls: this.inputValue,
          current: e
        });
      },


      sourceTypeChangechooseVideo() {
        var that = this
        uni.showActionSheet({
          title: '选择类型',
          itemList: this.videosourceType,
          success: e => {
            // fVideofile
            that.videosourceTypeIndex = e.tapIndex
            that.chooseVideo(that.videosourceTypeIndex)

          }
        });
      },
      interVideo(src) {

        uni.navigateTo({
          url: '/pages/commonVideo/commonVideo?src=' + src
        });
      }
    }
  }
</script>

<style lang="scss">
  .cLabelT {
    position: relative;
  }

  .cLabel {
    align-items: center;
    justify-content: space-between;
    border-bottom: 1upx solid rgba(0, 0, 0, .1);
  }

  .cLabel-mw {
    display: flex;
    justify-content: space-between;
    flex: 2;
    align-items: center;
  }

  .cLabel-m {
    flex: 2;
  }

  .text-cut {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-weight: 400;
    // color: #606266;
    // color: rgb(160, 160, 160);
    font-size: 28upx;
  }

  .flex-l {
    width: calc(4em + 15px)
  }

  .noflex {
    margin-bottom: 15px;
  }

  .img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
  }

  .cLabel-r {
    margin-left: 20upx;
  }

  // sizeh
  .c-mini {
    padding: 10upx 0;
    margin: 0 10upx;
    font-size: 28upx;
    font-weight: 600;
  }

  .c-small {
    padding: 20upx 40upx;
    // margin: 0 20px;
    font-size: 28upx;
    // font-weight: 700;
    background-color: #fff;
  }

  .c-medium {
    padding: 20upx 0;
    margin: 0 20upx;
    font-size: 36upx;
    font-weight: 800;
  }


  .c-textarea {
    overflow: hidden;
    position: relative;
    padding-bottom: 30upx;
  }

  .c-textarea-count {
    position: absolute;
    font-size: 24upx;
    line-height: 32upx;
    bottom: 10upx;
    right: 0px;
    color: #999;
  }

  .c-textarea textarea {
    height: 160upx;
    font-size: inherit;
    display: block;
    width: 100%;
    border: 0;
    box-sizing: border-box;
    outline: 0;
    resize: none;
  }

  .c-textarea:focus-within {
    border-color: #00a5e0;
  }

  .disabled,
  .disabled .uni-input-placeholder,
  .disabled .disabledInp,
  .disabled .input-placeholder {
    color: #aaa;
  }

  // mode = 'switch'

  // mode = textarea
  .textarea-t {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .textarea-l {
    margin-bottom: 30upx
  }

  // mode=img
  .img-l {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30upx;
    align-items: center;
  }

  .img-l .action {
    font-size: 24upx;
    color: #999;
  }

  .subTitle {
    font-size: 12px;
  }


  .uni-input-placeholder {
    color: rgb(160, 160, 160) !important;
    font-size: 28upx;
    text-align: right;
    margin-right: 60upx;
  }

  .uni-input-input {
    color: #333 !important;
    font-size: 28upx;

    padding-right: quote($string: 0u)30px;
    text-align: right;
  }

  .flex-l {
    color: #333 !important;
    font-size: 28upx;
  }

  // 借用 colorui
  .grid {
    display: flex;
    flex-wrap: wrap;
  }

  .flex-sub {
    flex: 1;
  }

  .grid.grid-square>uni-view>uni-text[class*="cuIcon-"] {
    font-size: 52upx;
    position: absolute;
    color: #8799a3;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: 1upx solid #333;
  }

  .bg-img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .grid.grid-square .cu-tag {
    position: absolute;
    right: 0;
    top: 0;
    border-bottom-left-radius: 3px;
    padding: 6upx 12upx;
    height: auto;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
  }

  .grid.grid-square>uni-view.bg-img uni-image {
    width: 100%;
    height: 100%;
    position: absolute;
  }

  .grid.grid-square>uni-view.bg-vid uni-video {
    width: 100%;
    height: 100%;
    position: absolute;
  }

  .cu-tag {
    font-size: 24upx;
    vertical-align: middle;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0px 16upx;
    height: 48upx;
    font-family: Helvetica Neue, Helvetica, sans-serif;
    white-space: nowrap;
  }

  .solids::after {
    border: 8upx solid #eee;
  }

  .cuIcon-cameraadd:before {
    // content: "+";
  }

  .grid.col-4.grid-square>uni-view {
    padding-bottom: calc((100% - 30px)/4);
    height: 0;
    width: calc((100% - 30px)/4);
  }

  .grid.col-4>uni-view {
    width: 25%;
  }

  .vid-l {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 15px;
    align-items: center;
  }

  .vid-l .action {
    font-size: 12px;
    color: #999;
  }

  .grid.col-8.grid-square>.bg-vid {
    padding-bottom: calc((100% - 30px)/4);
    // height: 0;
    // width: calc((100% - 30px)/4);
  }

  .grid.col-8 {
    // padding: 0 20px;
    // display: flex;
    // justify-content: center;
  }

  .grid.col-8>.bg-vid {
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: center;


  }

  .grid.col-8.grid-square>.solids {
    padding-bottom: calc((100% - 30px)/4);
    height: 0;
    width: calc((100% - 30px)/4);
  }

  .grid.col-8>.solids {
    width: 25%;

  }

  .bg-vid {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .grid.grid-square>uni-view {
    margin-right: 20upx;
    margin-bottom: 20upx;
    border-radius: 6upx;
    position: relative;
    overflow: hidden;
  }

  // 可删除
  .cuIcon-attentionforbidfill:before,
  .cuIcon-remind:before,
  .cuIcon-vipcard:before,
  .cuIcon-people:before,
  .cuIcon-attentionfill:before,
  .cuIcon-locationfill:before {
    content: "@"
  }

  .cuIcon-close {
    position: relative;
    z-index: 9999;
  }

  .cuIcon-close:before {
    content: "×";

  }

  .cuIcon-right:before {
    // content: ">";
    font-family: cuIcon;
    display: block;
    content: "\e6a3";
    font-weight: 400;
    // position: absolute;
    // font-size: 16px;
    color: rgb(160, 160, 160);

    line-height: 70upx;
    font-size: 32upx;
    width: 30upx;

    text-align: center;
    margin-top: 6upx;
    // top: 0;
    // bottom: 0;
    // right: 20px;
    // margin: auto;
  }

  .text_align {
    text-align: right;
    // padding-right: 30px;
  }
</style>
